<!-- 报修 -->
<template>
  <div>
    <div>
      <!--   返回上一页 <   -->
      <div class="page-title">
        <div class="flex justify-between" style="margin: 3px 4px 3px 0">
          <div class="flex items-center">
            <van-icon
              name="arrow-left"
              size="20"
              style="border-radius: 50%"
              @click="goBack"
            ></van-icon>
            <div class="ml-[10px]" style="margin-left: 130px">报修详情</div>
          </div>
          <div class="flex items-center">
            <van-icon name="ellipsis" size="20" />
          </div>
        </div>
        <hr />
      </div>
      <hr />
    </div>
    <div class="main-container h-[100vh]">
      <!--  报修信息  -->
      <div style="margin-top: 20px">
        <el-form ref="formRef">
          <el-form-item label="联系人" prop="name"></el-form-item>
          <el-form-item label="手机号" prop="phone"> </el-form-item>
          <el-form-item label="公寓信息" prop="info"></el-form-item>
          <el-form-item label="问题描述" prop="description">
            <el-input
              v-model="forms.description"
              type="textarea"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="问题图片" prop="imgUrl">
            <div aria-placeholder="上传图片">
              <img v-if="forms.imgUrl" :src="forms.imgUrl" class="avatar"  alt=""/>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <van-form ref="formRef">
          <div class="mt-[50px]">
            <loading-button
              round
              block
              type="primary"
              native-type="submit"
              :loadingClick="ondelete"
            >
              提交
            </loading-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import LoadingButton from "@/components/LoadingButton/LoadingButton.vue";
import { ElMessage } from "element-plus";
import http from "@/utils/http";
const route = useRoute();
const router = useRouter();
// 登录信息
const formRef = ref({
  address: "",
  name: "",
  phone: "",
  description: "",
  imgUrl: ""
});

// 获取报修信息
const getRepairDetail = () => {
  http.get("/app/repair/getRepairById", {
      id: route.params.id
    })
    .then(res => {
      formRef.value = res.data;
    })
    .catch(err => {
      ElMessage.error("获取报修信息失败");
    });
};
// 删除报修记录
const ondelete = () => {
  http
    .post("/app/repair/delete", {
      id: route.params.id
    })
    .then(() => {
      ElMessage.success("删除成功");
      router.go(-1);
    })
    .catch(err => {
      ElMessage.error("删除失败");
    });
};

// 返回上一页
const goBack = () => {
  router.go(-1);
};
onMounted(() => {
  getRepairDetail();
});
</script>

<style scoped lang="less">
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
